import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:vape_xe/utils/utils.dart';
import 'package:vape_xe/values/values.dart';
import 'package:vape_xe/widgets/widgets.dart';

import 'logic.dart';

class EnergyView extends GetView<EnergyController> {
  const EnergyView({super.key});

  Widget _item(int index) {
    return Container(
      decoration: BoxDecoration(
        color: Colors.white10,
        borderRadius: 16.radius,
      ),
      child: Column(
        children: [
          Padding(
            padding: EdgeInsets.symmetric(vertical: 8.h),
            child: Row(
              children: [
                8.vGap,
                Stack(
                  children: [
                    SizedBox(
                      width: 60.w,
                      height: 60.h,
                    ),
                    Positioned(
                      left: 0,
                      top: 0,
                      bottom: 0,
                      right: 0,
                      child: Container(
                        padding: EdgeInsets.symmetric(vertical: 4.h),
                        child: netImageCached(
                          controller.productList[index]['icon'],
                          width: 60.w,
                          height: 52.w,
                          showProgress: false,
                          showError: false,
                        ),
                      ),
                    ),
                  ],
                ),
                8.vGap,
                Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Text(
                        controller.productList[index]['name'],
                        style: TextStyle(fontSize: 11.sp, color: Colors.white),
                      ),
                      16.hGap,
                      Row(
                        children: [
                          Image.asset(
                            'assets/images/ic_paopao.webp',
                            width: 14.w,
                            height: 14.w,
                          ),
                          4.vGap,
                          Text(
                            '+${controller.productList[index]['coin']}',
                            style: TextStyle(
                              fontSize: 16.sp,
                              fontWeight: FontWeight.bold,
                              fontFamily: 'Montserrat',
                              color: Colors.white,
                            ),
                          )
                        ],
                      ),
                      Text(
                        'Profit per hour'.tr,
                        style: TextStyle(fontSize: 9.sp, color: Colors.white30),
                      ),
                    ])
              ],
            ),
          ),
          Divider(height: 1.h, color: Colors.white10),
          Padding(
            padding: EdgeInsets.symmetric(vertical: 4.h),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: [
                Text(
                  'LV.${controller.productList[index]['level']}',
                  style: TextStyle(
                    fontSize: 12.sp,
                    fontFamily: 'Montserrat',
                    fontWeight: FontWeight.bold,
                    color: AppColors.levelHaloColor[controller.productList[index]['level']],
                  ),
                ),
                SizedBox(
                  width: 49.w,
                  height: 2.h,
                  child: LinearProgressIndicator(
                    value: double.parse(controller.productList[index]['percentage']?.toString() ?? '0') / 100.0,
                    backgroundColor: Colors.white30,
                    color: Colors.white,
                    minHeight: 2.h,
                    borderRadius: 100.radius,
                  ),
                ),
                Text(
                  '\u{221E}',
                  style: TextStyle(fontSize: 9.sp, color: Colors.white),
                )
              ],
            ),
          ),
          Expanded(
            child: GestureDetector(
              onTap: () => controller.goToUpgrade(index),
              child: Container(
                width: double.infinity,
                height: 20.h,
                decoration: BoxDecoration(
                  gradient: controller.productList[index]['isMax'] != 1
                      ? const LinearGradient(colors: [Color(0xff6EDEF7), Color(0xff3351EF)])
                      : null,
                  borderRadius:
                      const BorderRadius.only(bottomLeft: Radius.circular(16), bottomRight: Radius.circular(16)),
                ),
                child: Center(
                  child: Text(
                    controller.productList[index]['isMax'] != 1 ? 'Upgrade'.tr : 'Top level'.tr,
                    style: TextStyle(
                      fontSize: 12.sp,
                      fontFamily: 'Montserrat',
                      fontWeight: FontWeight.bold,
                      color: controller.productList[index]['isMax'] != 1 ? Colors.white : Colors.white30,
                    ),
                  ),
                ),
              ),
            ),
          )
        ],
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        leading: IconButton(
          icon: const Icon(Icons.arrow_back_ios_new_rounded),
          onPressed: () => Get.back(),
        ),
        title: Text('Energy'.tr),
      ),
      body: Obx(
        () => controller.productList.isEmpty
            ? Center(child: Text('Empty list'.tr))
            : Padding(
                padding: EdgeInsets.symmetric(horizontal: 16.w),
                child: GridView.builder(
                  shrinkWrap: true,
                  physics: const NeverScrollableScrollPhysics(),
                  itemCount: controller.productList.length,
                  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                    crossAxisCount: 2, // 每一行的列数
                    mainAxisSpacing: 10.h, // 主轴方向上的间距
                    crossAxisSpacing: 8.w, // 交叉轴方向上的间距
                    childAspectRatio: 1.4, // 子项的宽高比
                  ),
                  itemBuilder: (BuildContext context, int index) {
                    return _item(index);
                  },
                ),
              ),
      ),
    );
  }
}
